import React from 'react';
import { connect } from 'dva';
import Link from 'umi/link';
import { toThousands } from '@/utils/util'
import style from './index.less';
import router from 'umi/router';

class Block extends React.Component {
  constructor(props) {
    super(props);
    this.createClickHandler = this.createClickHandler.bind(this);
  }

  createClickHandler(hash) {
    return async (e) => {
      e.preventDefault();
      await this.props.dispatch({
        type: 'global/fetch',
        payload: {value: hash}
      });
      const search = this.props.search;
      if (!search) return;
      if (search.prevHash || search.nextHash) {
        router.push(`/block/${search.hash}`);
      } else {
        router.push(`/transaction/${search.hash}`);
      }
    }
  }

  render() {
    const data = this.props.data;
    const parents = data.parentHash ? data.parentHash.map((parent, index) => {
      return (
        <div key={index} className={style.inner}>
          <span><Link to='#' onClick={this.createClickHandler(parent)}>{parent}</Link></span>
        </div>
      );
    }) : null;

    return (
      <div className={style.normal}>
        <div className={style.title}>
          <span>序列块信息</span>
        </div>
        <div className={style.info}>
          <div className={style.left}>
            <div className={`${style['item-first']} ${style['item']}`}>
              <div>
                <span>高度</span>
              </div>
              <div>
                <span>{toThousands(data.height)}</span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>交易数量</span>
              </div>
              <div>
                <span>{toThousands(data.transactionCount)}</span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>时间</span>
              </div>
              <div>
                <span>{data.outputTime}</span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>出块者</span>
              </div>
              <div>
              <span>
                {
                  data.miner.address
                }
              </span>
              </div>
            </div>
            {
              data.miner.known ? (
                <div className={style.item}>
                  <div>
                    <span>出块来源</span>
                  </div>
                  <div>
                    <span><img src={data.miner.logoUrl} alt={data.miner.address} height='12px' width='12px'/>{' '+ data.miner.name}</span>
                  </div>
                </div>
              ) : null
            }
            <div className={style.item}>
              <div>
                <span>出块者nonce</span>
              </div>
              <div>
                <span>{data.nonce}</span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>区块委员会</span>
              </div>
              <div>
                <span>{data.committee}</span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>交易平均并发量</span>
              </div>
              <div>
                <span>{data.transactionAvgCon}</span>
              </div>
            </div>
          </div>
          <div className={style.right}>
            <div className={`${style['item-first']} ${style['item']}`}>
              <div>
                <span>联合签名</span>
              </div>
              <div>
                <span>{data.unionSign}</span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>联合签名公钥</span>
              </div>
              <div>
                <span>{data.unionSignPublic}</span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>前一序列块哈希</span>
              </div>
              <div>
                <span><Link to={`/block/${data.prevHash}`}>{data.prevHash}</Link></span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>后一序列块哈希</span>
              </div>
              <div>
                <span><Link to={`/block/${data.nextHash}`}>{data.nextHash}</Link></span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>stateRoot</span>
              </div>
              <div>
                <span>{data.stateRoot}</span>
              </div>
            </div>
            <div className={style.item}>
              <div>
                <span>图父节点列表</span>
              </div>
              <div>
                {parents}
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}


function mapStateToProps(state) {
  const { data: search } = state.global;
  return {
    search
  };
}

export default connect(mapStateToProps)(Block);
